<template>
  <!--标题-->
  <div class="title title_border">
    <!-- 返回icon -->
    <el-icon v-if="isBack" class="pointer" @click="handleBack"
      ><ArrowLeftBold
    /></el-icon>
    <!-- 主页icon -->
    <el-icon v-else class="pointer"><HomeFilled /></el-icon>
    <slot name="header" />
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import { HomeFilled, ArrowLeftBold } from "@element-plus/icons";
export default {
  name: "TableHeaderTitleVue",
  props: {
    /* 返回按钮*/
    onBackBtn: {
      type: Function,
      default: null,
    },
  },
  components: {
    ArrowLeftBold,
    HomeFilled,
  },
  setup(props, context) {
    const state = reactive({
      isBack: typeof props.onBackBtn === "function",
    });
    const handleBack = () => {
      onBackBtn();
    };
    return {
      ...toRefs(state),
      handleBack,
    };
  },
};
</script>

<style scoped lang="scss">
//项目列表模块标题
.title {
  height: 40px;
  line-height: 39px;
  font-weight: bold;
}

// 项目模块标题边框
.title_border {
  box-shadow: 0px 1px 0px 0px rgba(238, 238, 238, 1),
    0px 1px 0px 0px rgba(238, 238, 238, 1);
}
</style>
